<template>
  <div id="app">
    <div class="searchBox">
     <headsearch @closeevent="goBack()"></headsearch>
     </div>
 
    <div class="sortBox">
      <div class="defaultSort sort " :class="{selected:chooseHot}" @click="chooseOrder('default')">
        热门
      </div>
      <div class="sortUp  sort" @click="chooseOrder('price_asc')" :class="{selected:chooseAscOrder}"> 
      价格升序<i class="iconfont icon-less"></i>
      </div>
      <div class="sortDown sort"@click="chooseOrder('price_desc')" :class="{selected:chooseDescOrder}">
      价格降序<i class="iconfont icon-moreunfold"></i>
      </div>
    </div>
    <div class="listContent"  v-for="(list,index) in listData"  :key="index">
      <div class="itemContent" v-for="item in list" :key="item.id" @click="goDetail(item.id)">   
          <div class="picContent">
            <img :src="item.imageHost+item.mainImage"/>
          </div>
          <div class="textContent">
            <div class="itemtitle">{{item.name}}</div>
            <div class="subtitle">{{item.subtitle}}</div>
            <div class="price">¥ {{item.price}}</div>
          
          </div>
      </div>
    </div>
    <div class="count-number">
      {{currentPageComputed}}/{{totalPage}}
    </div>

    <div class="backToTop" @click="backToTop()">
      <i class="iconfont icon-less"></i>
    </div>
    <div class="goCart" @click="goCart()">
     
      <i class="iconfont icon-cart"></i>
      
    </div>

     <div class="floatContent" v-show="showFloat">
       <router-view v-on:closeevent="showFloatBox()" v-on:loginSuccess="loginCallBack()">
         </router-view>
     </div>
  </div>

   
</template>

<script>

import 'common/css/reset.css';
import 'common/css/iconfont.css';
import headsearch from "components/headsearch/headsearch"

var _cart   =require("common/util/server/cart.js");
var _user   =require("common/util/server/userServer.js");
var _product=require("common/util/server/product.js");
var _mm     =require("common/util/mm.js");
  export default {
    name: 'app',
    data(){
    return {
      listParam : {
            keyword         : _mm.getUrlParam('keyword')    || '',
            categoryId      : _mm.getUrlParam('categoryId') || '',
            orderBy         : _mm.getUrlParam('orderBy')    || '',
            pageNum         : _mm.getUrlParam('pageNum')    || 1,
            pageSize        : _mm.getUrlParam('pageSize')   || 7
        },
      
      listData:[],
      loadListCheck:false,
      rightNowPage:1,
      totalPage:0,
      pagePositionList:["0"],
      scrollY:0,
      changeRouter:"",
      showFloat:false,
    }
    },
    created(){
      var _this=this;
      var listParam=this.listParam;
       // 删除参数中不必要的字段
        listParam.categoryId 
            ? (delete listParam.keyword) : (delete listParam.categoryId);
      _product.getProductList(listParam,function(res){
        
              // _this.firstList=res.data.list;
              _this.listData.push(res.data.list);
              _this.totalPage=res.data.pages;
              _this.rightNowPage= res.data.pageNum;
              _this.listParam.orderBy= res.data.orderBy;
      },function(err){

      });
       // window.addEventListener('scroll', this.handleScroll);
        
    },
    mounted(){
       window.addEventListener('scroll', this.handleScroll);
     
       
    },
    computed:{
         
          currentPageComputed(){

                      if (this.pagePositionList.length<2 && this.scrollY) {
                        return 1;
                          
                      }else{

                        for(var index in  this.pagePositionList){

                          if(index== (this.pagePositionList.length-1)){
                          
                              if ((this.scrollY>=this.pagePositionList[index])) {
                               return parseInt(index)+1 ; 
                              }
                          }else{
                                  
                            if((this.scrollY >= this.pagePositionList[index]) && 
                              (this.scrollY <this.pagePositionList[parseInt(index)+1])){
                             return parseInt(index)+1 ;
                              
                            }
                          }
                        }
                      }
          },
          chooseHot(){

             return !this.listParam.orderBy ;
          },
          chooseDescOrder(){
              return  this.listParam.orderBy === "price desc";
          },
          chooseAscOrder(){
              return  this.listParam.orderBy === "price asc";
          },

    },
    methods:{ 
              showFloatBox(){
                  this.showFloat=!this.showFloat;

              },
              goDetail(productId){
                  window.location.href="./detail.html?productId="+productId;
              },
              goCart(){
                var _this=this;
                  _user.checkLogin(function(res){
                    console.log("alreadyLogin");
                      _this.changeRouter="/cart";
                      _this.$router.push(_this.changeRouter);
                  },function(err){
                    _this.changeRouter="/login"
                       _this.$router.push(_this.changeRouter);
                  });
                  
                  this.showFloat=true;

              },
              goBack(){
                window.history.back();
              },
              chooseOrder(order){
                var _this= this;
                        this.listParam.orderBy =order;

                   _product.getProductList(this.listParam,function(res){
             
                      // _this.firstList=res.data.list;
                      _this.listData=[];
                      _this.listData.push(res.data.list);
                      _this.totalPage=res.data.pages;
                      _this.rightNowPage= res.data.pageNum;
                      _this.listParam.orderBy= res.data.orderBy;

                    },function(err){

                     });
                   console.log(this.listParam.orderBy === "price_asc");
              }, 
              
              handleScroll(){
                var _this=this;
                // console.log(window.scrollY)
                // console.log(document.documentElement.clientHeight);
                // console.log(document.body.clientHeight);
                // console.log(window.screen.height );
                // console.log(document.body.scrollTop);
                if(window.scrollY%20 ==0){this.scrollY=window.scrollY};
                if((document.body.clientHeight-(window.scrollY+document.documentElement.clientHeight))<50){
                  console.log("到底啦");
                  _this.loadListCheck=true;
                }else{
                  _this.loadListCheck=false;
                }

              },
              backToTop(){
                  window.scrollTo(0,0);
              },


    },
    watch:{
       '$route' (to, from) {
      // 对路由变化作出响应...
            if (to.path === "/") {
              console.log(1);
              this.showFloat=false;
            }

    },
      loadListCheck:function(){
        var _this=this;
        if (this.loadListCheck && this.rightNowPage<this.totalPage) {
            this.listParam.pageNum= ++this.rightNowPage;
             _product.getProductList(this.listParam,function(res){
     
              // _this.firstList=res.data.list;
              _this.listData.push(res.data.list);
              _this.totalPage=res.data.pages;
              _this.rightNowPage= res.data.pageNum;
              _this.listParam.orderBy= res.data.orderBy;
              _this.pagePositionList.push(window.scrollY);
            },function(err){

             });

        }
      },
          updateList(res){

          }
    },
    components:{
      headsearch,

    }
    
   
   
  };

</script>

<style lang="stylus" >
#app
  font-size:16px
  .searchBox
    position:fixed
    left:0
    top:0
    width:100%
  .sortBox
    width:100%
    height:42px
    margin-top:40px
    border-top:.5px solid #bfbfbf
    border-bottom:.5px solid #bfbfbf
    box-sizing:border-box 
    line-height:40px
    .sort
      display:inline-block
      height:28px
      width:29%
      background:#f0f2f5
      color:#232326
      text-align:center
      margin:0 5px
      font-weight:600
      line-height:28px
      vertical-align:middle
      &.selected
        background:rgb(222,64,43)
        color:#fff
  .listContent
    width:100%
    .itemContent
      width:90%
      margin:0 auto
      border-bottom:.5px solid #bfbfbf
      height:110px
      padding:5px 0px
      box-sizing:border-box
      display:flex
      .picContent
        height:100px
        width:100px
        flex:0 0 100px
        display:inline-block
        img
          height:100%
          width:100%
      .textContent
        display:inline-block
        flex:1
        padding-left:5px
        .itemtitle
          height:50px
          font-size:16px
          line-height:25px
          overflow: hidden
          text-overflow: ellipsis
          word-break:break-word
        .subtitle
          height:20px
          line-height:20px
          color:#848689
          font-size:12px
        .price
          overflow:left
          font-size:24px
          height:30px
          line-height:30px
          font-weight:700
          color:rgb(244, 64, 43)
  .count-number
    position:fixed
    bottom:20px
    left:43%
    width: 60px;
    display: block;
    padding: 1px 0;
    text-align: center;
    font-size: 13px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid transparent;
    background-color: rgba(0,0,0,0.6);
    border-radius: 10px;
    color: white;
  .backToTop
    position: fixed;
    z-index: 50;
    right: 8px;
    bottom: 40px;
    width: 35px;
    height: 35px;
    border-radius:50%;
    font-weight:800
    border:1px solid #f0f2f5
    background-color:rgba(0, 0, 0,.2);
    text-align:center
    .iconfont
      line-height:35px
  .goCart
    position: fixed;
    z-index: 50;
    right: 8px;
    bottom: 80px;
    width: 35px;
    height: 35px;
    border-radius:50%;
    font-weight:800
    border:1px solid #f0f2f5
    background-color:rgba(0, 0, 0,.2);
    text-align:center
    .iconfont
      line-height:35px
  .floatContent
    width:100%;
    height:100%;
    background:white;
    position:fixed;
    top:0
    left:0   
    z-index:100

      
    
</style>
